<template>
  <div class="app-container">
    <div class="topform">
      <el-input style="width: 300px" clearable v-model="form.serchKeyword" placeholder="请输入搜索内容"
                autocomplete="off"/>
      <el-button type="primary" style="margin-left: 10px" @click="getlistdata(true)" icon="el-icon-search">搜索
      </el-button>
      <el-button type="primary" @click="opendialog(true)" icon="el-icon-circle-plus-outline">添加</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list"
              element-loading-text="Loading" border fit
              header-cell-class-name="tableheader">
      <el-table-column align="center" label="菜单名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单路由">
        <template slot-scope="scope">
          {{ scope.row.navigate }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单ID">
        <template slot-scope="scope">
          {{ scope.row.diy_menu_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="opendialog(false,scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" plain @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          style="text-align: center"
          layout="prev, pager, next"
          small
          :current-page="form.page"
          :page-size="form.pagesize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    </div>
    <el-dialog :close-on-click-modal="false" :title="dialogtitle" :visible.sync="dialog" width="35%">
      <el-form :model="dialogform" ref="dialogform" :rules="dialogrule" label-width="100px">
        <el-form-item label="菜单名称：" prop="name">
          <el-input clearable v-model="dialogform.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="路由地址：" prop="navigate">
          <el-input clearable v-model="dialogform.navigate" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="菜单ID：" prop="diy_menu_id">
          <el-input clearable v-model="dialogform.diy_menu_id" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="上级菜单：">
          <el-select v-model="dialogform.parent_id" clearable placeholder="请选择上级菜单">
            <el-option v-for="item in alllist" :label="item.name" :value="item.menu_id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogbtn">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        serchKeyword: '',
        page: 1,
        pagesize: 13
      },
      dialogform: {
        menu_id: '',
        name: '',
        navigate: '',
        diy_menu_id: '',
        parent_id: '',
      },
      dialogrule: {
        name: [
          { required: true, message: '此项为必填项' },
        ],
        navigate: [
          { required: true, message: '此项为必填项' },
        ],
        diy_menu_id: [
          { required: true, message: '此项为必填项' },
        ],
      },
      dialogtitle: '',
      list: [],
      alllist: [],
      total: 0,
      listLoading: true,
      dialog: false,
    };
  },
  created() {
    this.getlistdata();
    this.getalllist();
  },
  methods: {
    getlistdata(isquery) {
      this.listLoading = true;
      if (isquery === true) {
        this.form.page = 1
      }
      this.$post(this.$api + '/get_mini_menu_pagelist', {
        'serchKeyword': this.form.serchKeyword,
        'page': this.form.page,
        'pagesize': this.form.pagesize
      })
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.list = res.rows;
              this.total = res.total;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
    },
    getalllist() {
      this.$post(this.$api + '/get_mini_menu_pagelist', {
        'ispage': false,
      })
          .then((res) => {
            if (res.code === 0) {
              this.alllist = res.rows;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
    },
    opendialog(isadd, item) {
      if (isadd) {
        this.dialogtitle = '添加菜单'
        this.dialogform = {
          mid: '',
          m_name: '',
          route_url: '',
          route_id: '',
          parent_id: '',
        }
        this.dialog = true;
      } else {
        this.dialogtitle = '编辑菜单'
        this.dialogform = item;
        this.dialog = true;
      }
    },
    dialogbtn() {
      this.$refs['dialogform'].validate((valid) => {
        if (valid) {
          this.listLoading = true;
          this.$post(this.$api + '/save_mini_menu', this.dialogform).then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
              this.dialog = false;
              this.dialogform = {
                mid: '',
                m_name: '',
                route_url: '',
                route_id: '',
                parent_id: '',
              };
              this.getlistdata();
              this.getalllist();
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              })
            }
          })
        }
      })
    },
    delbtn(item) {
      this.$confirm('确认删除？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$get(this.$api + '/del_mini_menu', {
          'menu_id': item.menu_id
        })
            .then((res) => {
              this.listLoading = false;
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
                this.getlistdata();
                this.getalllist();
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
      })
    },
    handleSizeChange(v) {
      this.form.pagesize = v;
      this.getlistdata()
    },
    handleCurrentChange(v) {
      this.form.page = v;
      this.getlistdata()
    }
  }
}
</script>
